<template>
	<view>
		<u-toast ref="uToast" />
		<view class="relocation-content">
			<view class="relo-header">
				<uni-forms ref="form" :modelValue="params" :rules="rules" :label-width="50">
					<uni-forms-item label="容器条码" name="contNo" :label-align="labelAlign" :label-width="70">
						<uni-easyinput ref="inputSelect" size="small" id="inputSelect" focus suffixIcon="search"
							trim="all" @focus="_inputFocus" v-model="params.contNo" maxlength="8" placeholder="请输入容器条码"
							confirm-type="search" @confirm="handleSearch()" @iconClick="handleSearch"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="物料名称" name="spuName" label-align="right" :label-width="70">
						<uni-data-select :disabled="selDisable" placeholder="请选择物料名称" v-model="spuNo" :localdata="range"
							@change="selectChange"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="计划数量" name="planQty" :label-align="labelAlign" :label-width="70">
						<uni-easyinput ref="planQty" v-model="params.planQty" type="number" disabled></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="实物数量" name="actlQty" :label-align="labelAlign" :label-width="70">
						<uni-easyinput ref="actlQty" v-model="params.actlQty" type="number" maxlength="5"
							placeholder="请输入数量"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
			</view>
			<swiper class="relo-text" :current="currentIndex" :duration="500" :virtualize="true"
				@change="currentChange">
				<swiper-item v-for="(item,index) in listData" :key="index" class="form-swiper">
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>物料编号：</text>
							<view class="swiper-content">
								{{item.spuNo}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>物料名称：</text>
							<view class="swiper-content">
								{{item.spuName}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="12">
							<text>库存数量：</text>
							<view class="swiper-num">
								【{{item.planQty}}】
							</view>
						</uni-col>
						<uni-col :span="12">
							<text>盘点数量：</text>
							<view class="swiper-num">
								【{{item.actlQty}}】
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>盘点日期：</text>
							<view class="swiper-des">
								{{item.createDate}}
							</view>
						</uni-col>
					</uni-row>
				</swiper-item>
			</swiper>
			<uni-pagination :show-icon="true" :total="total" :pageSize="1" :current="currentIndex + 1" title="标题文字"
				@change="handleChange" />
		</view>
		<button class="next" type="primary" @click="confirm">盘点确认</button>
	</view>
</template>
</script>
<script>
	import {
		taskSearch,
		checkConfirm
	} from '@/api/request.js'
	import {
		rules
	} from '../config/form.js'
	export default {
		name: 'rf-form',
		data() {
			return {
				selDisable: true,
				listData: [],
				// 存储数据
				clistData: [],
				range: [],
				rules: rules,
				spuNo: '',
				params: {
					taskId: '',
					taskType: '05',
					taskSubType:'052',
					contNo: '',
					planQty: '',
					actlQty: '',
					locateNo: ''
				},
				labelAlign: 'right',
				total: 1,
				currentIndex: 0,
				spuKey: ''
			};
		},
		methods: {
			// 物料关键字失焦chu发
			keyBlur() {
				let range = this.clistData.filter((item) => item.spuName.includes(this.spuKey))
				this.initSelect(range)
			},
			// 轮播下标更新
			currentChange({
				detail
			}) {
				console.log("触发轮播1...")
				this.currentIndex = detail.current
				this.spuNo = this.listData[this.currentIndex].spuNo
				this.params.planQty = this.listData[this.currentIndex].planQty
				this.params.actlQty = this.listData[this.currentIndex].planQty
			},
			// 选择物料 
			selectChange(e) {
				if (!e) {
					this.listData = []
				} else {
					this.listData = this.clistData.filter((item) => item.spuNo === e)
				}
				console.log("233", this.clistData, this.listData, this.listData.length);
				this.total = this.listData.length
				this.currentIndex = 0
			},
			// 输入框聚焦全选
			_inputFocus(event) {
				document.querySelector('#inputSelect input').select()
			},
			confirm() {
				if (this.listData.length === 0 || this.listData == null) {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '请扫描容器条码！',
					})
					return;
				}
				// 表单校验
				this.$refs.form.validate().then(res => {
					console.log('容器信息：', res);
					const selData = this.listData[this.currentIndex]
					const confirmParams = {
						taskId: selData.taskId,
						contNo: res.contNo,
						spuNo: selData.spuNo,
						actlQty: res.actlQty,
						userId: '1004'
					}
					uni.showModal({
						title: '提示',
						showCancel: true,
						content: `是否对物料[${selData.spuNo}]进行盘点,库存数量[${res.planQty}]实物数量[${res.actlQty}]`,
						success: (con) => {
							if (con.confirm) {
								// 点击确认按钮请求收获接口
								checkConfirm(confirmParams, (res) => {
									if (res.code === 0) {
										uni.showModal({
											title: '成功信息',
											confirmColor: '#00ff00',
											showCancel: false,
											content: res.data,
											success: (res) => {
												if (res.confirm) {
													this.currentIndex = 0
													this.query()
												}
											}
										})

									} else {
										uni.showModal({
											title: '失败提示',
											confirmColor: '#F54E40',
											showCancel: false,
											content: res.msg,
										})
									}
								})
							}
						}
					})

				}).catch(err => {
					const listData = {
						contNo: '容器条码',
						actlQty: '数量',
					}
					for (let key in listData) {
						if (!this.params[key]) {
							this.$refs[key].onFocus()
						}
					}
				})
			},
			// 检验输入是否为空
			checkInput() {
				let mark = false

				return mark
			},
			// 翻页
			handleChange(e) {
				this.currentIndex = e.current - 1
			},
			// 搜索按钮点击
			handleSearch() {
				if (!this.params.contNo) {
					return;
				}
				this.query()
			},
			// 搜索列表
			query(flag) {
				uni.showLoading()
				taskSearch(this.params, (res) => {
					if (res.code === 0 && res.data) {
						this.listData = res.data
						this.clistData = JSON.parse(JSON.stringify(res.data))
						this.total = res.data.length
						this.initSelect(this.clistData)
					} else {
						this.listData = []
						uni.showModal({
							title: '失败提示',
							confirmColor: '#F54E40',
							showCancel: false,
							content: `容器[${this.params.contNo}]的无盘点任务或已全部盘点完成!`,
						})
					}
				})
			},
			// 格式化下拉框数据
			initSelect(dataList) {
				this.selDisable = false
				this.range = []
				//将首选项显示到页面上
				// this.spuNo = dataList[0].spuNo
				this.params.planQty = dataList[0].planQty
				this.params.actlQty = dataList[0].planQty
				dataList.forEach((item, index) => {
					this.range.push({
						text: item.spuName,
						value: item.spuNo
					})
				})
			},
			clearText() {
				this.params.actlQty = ''
			},
			// 扫描容器号
			scanClick(e) {
				uni.scanCode({
					success: (res) => {
						this.params.contNo = res.result
						this.params.num = 0
						this.query()
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	@import url("@/static/styles/form.scss");
</style>
<style scoped>
	::v-deep .is-disabled {
		color: black;
	}

	.relocation-content .relo-header {
		padding-bottom: 0;
	}

	.unit {
		margin-right: 5px;
	}
</style>